<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            border: 2px #909090 solid;
            background-color: #000;
            width: 330px;
            height: 50px;
            margin-bottom:10px;
            color: #FFFFFF;
            font-size: 40px;
            text-align: right;
        }
        button{
            width: 95px;
            height: 40px;
            background-color: #E8E8E8;
            border: 1px #A4A4A4 solid;
            margin-left: 10px;
            margin-bottom: 2px;
        }
    </style>
</head>
<body>
<input type="text" id="f1"/><br/>
<button onclick="run1()" id="a1">0</button>
<button onclick="run2()" id="a2">1</button>
<button onclick="run3()" id="a3">2</button><br/>
<button onclick="run4()" id="a4">3</button>
<button onclick="run5()" id="a5">4</button>
<button onclick="run6()" id="a6">5</button><br/>
<button onclick="run7()" id="a7">6</button>
<button onclick="run8()" id="a8">7</button>
<button onclick="run9()" id="a9">8</button><br/>
<button onclick="run10()" id="a10">9</button>
<button onclick="run11()" id="a11">.</button>
<button onclick="run12()" id="a12">退格</button>
</body>
<script>
    var str="";
    var id = document.getElementById("f1");
    function run1() {
         str += document.getElementById("a1").innerHTML;
         id.value=str;
    }
    function run2() {
         str += document.getElementById("a2").innerHTML;
        id.value=str;
    }
    function run3() {
         str += document.getElementById("a3").innerHTML;
        id.value=str;
    }
    function run4() {
         str += document.getElementById("a4").innerHTML;
        id.value=str;
    }
    function run5() {
         str += document.getElementById("a5").innerHTML;
        id.value=str;
    }
    function run6() {
         str += document.getElementById("a6").innerHTML;
        id.value=str;
    }
    function run7() {
         str += document.getElementById("a7").innerHTML;
        id.value=str;
    }
    function run8() {
         str += document.getElementById("a8").innerHTML;
        id.value=str;
    }
    function run9() {
         str += document.getElementById("a9").innerHTML;
        id.value=str;
    }
    function run10() {
         str += document.getElementById("a10").innerHTML;
        id.value=str;
    }
    function run11() {
         str += document.getElementById("a11").innerHTML;
        id.value=str;
    }
    function run12() {
        var val = document.getElementById("f1").value;
        id.value= val.substring(0,val.length-1);

    }
</script>
</html>